<template>
  <div class="pagestyle">
    <list_controller :showCaozuo="true" :style="{ width: state.listBtnType == 6 ? '78%' : '100%' }" ref="zujianname"
      :options="state.options">
      <template v-slot:opraCurdBtnlist="row">
        <span>
          <el-button class="tableFontSize" type="primary" link size="small" @click="lookBtn(row.row.row)">填写分析
          </el-button>
          <el-button class="tableFontSize" type="primary" link size="small" @click="editBtn(row.row.row)"
            v-if="row.row.row.templateDto != null">查看分析
          </el-button>
        </span>
      </template>
      <template v-slot:opraCurdBtnAll>
        <span :class="state.listBtnType == 1 ? 'listInfoBtn active' : 'listInfoBtn'" @click="listInfoBtnClick(1)">
          <svg-icon :class="state.listBtnType == 1 ? 'active' : ''" class-name="search-icon" icon-class="qiehuan" />
          历史统计数据
        </span>
        <!-- <span
          :class="state.listBtnType == 2 ? 'listInfoBtn active' : 'listInfoBtn'"
          @click="listInfoBtnClick(2)"
        >
          <svg-icon
            :class="state.listBtnType == 2 ? 'active' : ''"
            class-name="search-icon"
            icon-class="shouyetaishifenxi"
          />
          态势分析
        </span> -->
        <span :class="state.listBtnType == 3 ? 'listInfoBtn active' : 'listInfoBtn'" @click="listInfoBtnClick(3)">
          <svg-icon :class="state.listBtnType == 3 ? 'active' : ''" class-name="search-icon" icon-class="dayin" />
          打印
        </span>
        <span :class="state.listBtnType == 4 ? 'listInfoBtn active' : 'listInfoBtn'" @click="listInfoBtnClick(4)">
          <svg-icon :class="state.listBtnType == 4 ? 'active' : ''" class-name="search-icon" icon-class="xiazai" />
          下载
        </span>
        <div class="xiazai" v-if="state.showDownload && state.listBtnType == 4">
          <div class="item" @click="downloadFn(1)">下载当前页</div>
          <div class="item" @click="downloadFn(2)">下载全部页</div>
        </div>
        <!-- <span
          :class="state.listBtnType == 6 ? 'listInfoBtn active' : 'listInfoBtn'"
          @click="listInfoBtnClick(6)"
        >
          <svg-icon
            :class="state.listBtnType == 6 ? 'active' : ''"
            class-name="search-icon"
            icon-class="tongjishuju"
          /> 
          统计数据
        </span> -->
      </template>
      <template v-slot:selectNamelist> 实时统计数据 </template>
      <template v-slot:listSS="{ row, field }">
        <div v-if="field == 'accumulationTime'">{{dayjs.duration(row.accumulationTime*60, 'seconds').format('HH时mm分钟')}}
        </div>
      </template>
    </list_controller>
    <!-- 填写分析 -->
    <fillayaCom :fillayaComShow="state.fillayaComShow" @submitFormfillayaCom="submitFormfillayaCom" :status="'B'">
    </fillayaCom>
    <ayadetailCom :detailsList="state.detailsList" :detailsShow="state.detailsShow"></ayadetailCom>
    <ayasdataCom style="width: 21.5%" v-if="state.listBtnType == 6" @close="close" :dataOption="state.dataOption">
    </ayasdataCom>
    <!-- 详情 -->
    <el-drawer v-model="state.drawerShow" direction="rtl" size="50%" close-on-click-modal :modal="true">
      <template #header="{ close, titleId, titleClass }">
        <h4 class="mask_sub_title" style="color:#3E464F;margin:0;">
          <svg-icon class-name="search-icon" icon-class="biaotitubiao" /><span>态势分析</span></h4>
      </template>
      <div>
        <realChartCutCom :targetTime="state.targetTime" :pointDataList="state.pointDataList"
          :drawerShow="state.drawerShow"></realChartCutCom>
      </div>
    </el-drawer>
  </div>
</template>
<script setup>
  import ayasdataCom from "./listCom/ayasdataCom.vue";
  import fillayaCom from "./listCom/fillayaCom.vue";
  import ayadetailCom from "./listCom/ayadetailCom.vue";
  import list_controller from "@/components/commonCom/list_controller";
  import realChartCutCom from "./listCom/realChartCutCom.vue";
  import {
    computed,
    nextTick,
    onActivated,
    onMounted,
    onUnmounted,
    reactive,
    ref,
    watch,
    inject,
  } from "vue";
  import {
    table_headers
  } from "@/components/commonCom/table_headers";
  import {
    ElMessage,
    ElMessageBox,
    ElNotification
  } from "element-plus";
  import axios from "@/utils/request";
  import usePagesStore from "@/store/modules/pages";
  import dayjs from "dayjs";
  // 时间插件
  import duration from 'dayjs/plugin/duration'
  dayjs.extend(duration);
  const {
    proxy
  } = getCurrentInstance();
  const store = usePagesStore();
  const router = useRouter();
  let previewHttps =
    import.meta.env.VITE_APP_HTTP;
  const upload = ref(null);
  let timer

  let state = reactive({
    detailsShow: false,
    detailsList: [],
    fillayaComShow: false, //控制填写分析抽屉显示
    listBtnType: undefined,
    options: {
      refreshShow: true,
      tableheads: computed(() => table_headers.realGasPumpStatistic),
      ismergethead: [{
          value: 'mixed',
          label: '工况混量'
        },
        {
          value: 'pure',
          label: '工况纯量'
        }, {
          value: 'stMixed',
          label: '标况混量'
        },
        {
          value: 'stPure',
          label: '标况纯量'
        }
      ],
      listSS: [{
        field: "accumulationTime"
      }],
      queryList: {
        querys: [],
      },
      dataUrl: "/realGasPumpStatistic/list",
    },
    tempList: [],
    timeDiff: '',
    // 表单
    editId: undefined,
    showDownload: false,
    dataOption: {
      twoTitle: '近24小时异常统计',
      threeTitle: '馈电异常次数及时长统计',
      fourTitle: '馈电测点异常次数',
      twoUrl: '/realPointAlarm/attainAnomalyInfo',
      threeUrl: '/hisPointFeed/listFeedInfoStatistic',
      fourUrl: '/hisPointFeed/listFeedStatistic'
    },
    drawerShow: false,
    pointDataList: [],
  });


  // 下载列表内容
  const downloadFn =async (n) => {
    if (n == 2) {
     await proxy.$refs.zujianname.getAllData()
    }
    setTimeout(() => {
      store.isDownload = n
      state.showDownload = false
      state.listBtnType = undefined;
    }, 200);
  }
  // 打印顶部内容模板
  const topHtml = `
<h1 class="title">实时馈电异常</h1>
`
  // 打印样式
  const printStyle = `
.title {
  text-align: center;
}
`
  // 打印列表内容
  const printList = () => {
    proxy.$refs['zujianname'].vxe.xGrid.print({
      style: printStyle,
      beforePrintMethod: ({
        content
      }) => {
        return topHtml + content
      }
    })
  }
  // 填写分析抽屉
  function lookBtn(row) {
    state.editId = row.id;
    state.fillayaComShow = dayjs().unix();
  }
  // 提交填写分析
  function submitFormfillayaCom(data) {
    let dataObj = {};
    dataObj.id = state.editId;
    dataObj.templateDto = data;
    if (data) {
      axios.post("/realAssortedFeed/modifyRealAssortedFeed", dataObj).then((res) => {
        proxy.$modal.msgSuccess(res.msg);
        state.fillayaComShow = false;
        proxy.$refs.zujianname.getData({})
      });
    } else {
      state.fillayaComShow = false;
    }
  }
  // 新增按钮
  function listInfoBtnClick(type) {
    state.listBtnType = type;
    if (type == 1) {
      goPage()
    }
    if (type == 2) {
      // state.targetTime = dayjs().format('YYYY-MM-DD HH:mm:ss')

      console.log(proxy.$refs.zujianname.vxe.state.records, "打的卡");
      if (proxy.$refs.zujianname.vxe.state.records.length > 0) {
        state.drawerShow = true
        state.pointDataList = proxy.$refs.zujianname.vxe.state.records
      } else {
        proxy.$modal.msgWarning('请先选择数据!')
      }
    }
    if (type == 3) {
      printList()
    }
    if (type == 4) {
      state.showDownload = !state.showDownload
    }
  }
  // 编辑按钮
  function editBtn(row) {
    state.detailsShow = dayjs().unix();
    state.detailsList = row.templateDto;
  }
  // 计算累计时间
  let formattedTime = ref('')
  const computTime = (row) => {
    if (row.feedAccumulationTime) {
      setInterval(() => {
        const now = new Date(); // 当前时间
        const target = new Date(row.feedTime); // 目标时间
        const diff = Math.abs(now - target); // 时间差（毫秒）
        const days = Math.floor(diff / (1000 * 60 * 60 * 24));
        const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
        const minutes = Math.floor((diff / (1000 * 60)) % 60);
        const seconds = Math.floor((diff / 1000) % 60);
        row.feedAccumulationTime = `${days}天${hours}时${minutes}分${seconds}秒`;
      }, 1000);
    } else {
      const now = new Date(); // 当前时间
      const target = new Date(row.feedTime); // 目标时间
      const diff = Math.abs(now - target); // 时间差（毫秒）
      const days = Math.floor(diff / (1000 * 60 * 60 * 24));
      const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
      const minutes = Math.floor((diff / (1000 * 60)) % 60);
      const seconds = Math.floor((diff / 1000) % 60);
      row.feedAccumulationTime = `${days}天${hours}时${minutes}分${seconds}秒`;
    }
    return row.feedAccumulationTime
  }
  // 关闭统计数据
  const close = () => {
    state.listBtnType = undefined
  }
  // 跳转历史馈电异常页面
  const goPage = () => {
    router.push({
      name: 'Cx_hisTJSJListWS'
    })
  }
  onMounted(() => {
    console.log(state.options.tableheads, "表头")
  })
</script>
<style lang="scss" scoped>
  .xiazai {
    position: absolute;
    top: 42px;
    right: 241px;
    width: 120px;
    height: 64px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    background-color: #ffff;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
    border-radius: 2px;
    z-index: 99;

    .item {
      width: 100%;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .item:hover {
      background-color: rgba(91, 109, 128, 0.08);
    }
  }

  .pagestyle {
    display: flex;
    justify-content: space-between;
  }
</style>